
// 导入React Router的导航钩子和样式文件
import { useNavigate } from 'react-router-dom'
import './NotFound.css'

/**
 * NotFound - 404页面组件
 * 当用户访问不存在的路由时会显示此页面
 * 包含返回首页的功能按钮
 */
export default function NotFound() {
    // 获取导航函数，用于编程式导航
    const navigate = useNavigate()

    return (
        // 主容器，应用了NotFound.css中的样式
        <div className="not-found-container">
            {/* 404错误码标题 */}
            <h1>404</h1>

            {/* 错误提示标题 */}
            <h2>页面未找到</h2>

            {/* 错误描述文本 */}
            <p>您访问的页面不存在或已被移除</p>

            {/* 返回首页按钮 
                点击后会导航到网站根路径 */}
            <button
                className="back-home-btn"
                onClick={() => navigate('/')}
            >
                返回首页
            </button>
        </div>
    )
}